Skip to main content

Data Grid

Type

object

Summary

An object for forms or tables

Description

The Data Grid enables you to integrate powerful tables and forms into your LiveCode projects. Data grids combine LiveCode groups and behaviors to provide you with a simple, yet flexible means of displaying your data in just about any way you want. See the datagrid lessson for full documentation, lessons, and tutorials.

Children Properties

Glossary

NameSummarySyntax
Datagrid General PropertiesGeneral properties of the datagrid are applicable whether the 'style' property is set to 'form' or 'table'Datagrid General Properties
Datagrid Table PropertiesTable properties of the datagrid are applicable when the 'style' property is set to 'table'.Datagrid Table Properties
Datagrid Column PropertiesThese properties allow you to set properties of individual columns in a table when the 'style' property is set to 'table'.Datagrid Column Properties
Template Field Editor PropertiesDatagrid cells can be edited. These property configure that editor.Template Field Editor Properties
Datagrid CommandsDatagrid commands are issued via 'dispatch' or 'send'.Datagrid Commands
Datagrid Template Custom Properties & MessagesThe properties and messages associated with the Data Grid templateDatagrid Template Custom Properties & Messages

Property

NameSummarySyntax
allow editingSet to true to allow users to edit the cells of a table or the fields in a form.set the dgProp["allow editing"] of group "Data Grid"
alternate row colorThe color of every other row's background.put the dgProp["alternate row color"] of group "Data Grid"
alternate row colorsSet to true to alternate the background colors of every other row.put the dgProp["alternate row colors"] of group "Data Grid"
auto hiliteEnables the data grid to automatically handle row highlighting.put the dgProp["auto hilite"] of group "Data Grid"
background colorThe background color of the data grid.put the dgProp["background color"] of group "Data Grid"
cache controlsCaches all controls for rendering.put the dgProp["cache controls"] of group "Data Grid"
column divider colorSets the color of the table column dividers.put the dgProp["column divider color"] of group "Data Grid"
column marginsSpecifies the margins to be applied to each cell in a column.put the dgProp["column margins"] of group "Data Grid"
control typeReturns "data grid"put the dgProp["control type"] of group "Data Grid"
dim on focusOutDims the highlighted lines when the data grid does not have focus.put the dgProp["dim on focusOut"] of group "Data Grid"
dimmed hilite colorColor that highlighted lines will be when control is not focused.put the dgProp["dimmed hilite color"] of group "Data Grid"
fixed row heightSet to true if all of your data will be drawn at the same height.put the dgProp["fixed row height"] of group "Data Grid"
hilite colorThe color to use when highlighting a row.put the dgProp["hilite color"] of group "Data Grid"
hilited text colorThe color to apply to text when a row is highlighted.put the dgProp["hilited text color"] of group "Data Grid"
multiple linesSet to true to allow the user to select multiple lines in the data grid.put the dgProp["multiple lines"] of group "Data Grid"
opaqueShows or hides the data grid background.put the dgProp["opaque"] of group "Data Grid"
persistent dataSet to true if you would like the data grid to store the data being displayed between sessions.put the dgProp["persistent data"] of group "Data Grid"
row colorThe primary row color.put the dgProp["row color"] of group "Data Grid"
row heightThis represents the height that your rows will be drawn at.put the dgProp["row height"] of group "Data Grid"
row templateThis is the group that represents a record in your data grid.put the dgProp["row template"] of group "Data Grid"
scroll when hscrollbar is hiddenThis overrides the default horizontal scrolling behavior.put the dgProp["scroll when hscrollbar is hidden"] of group "Data Grid"
scroll when vscrollbar is hiddenThis overrides the default vertical scrolling behavior.put the dgProp["scroll when vscrollbar is hidden"] of group "Data Grid"
scrollbar corner offsetScrollbar ofset from the corner when only one is visible.put the dgProp["scrollbar corner offset"] of group "Data Grid"
show vscrollbarToggles the visibility of the vertical scrollbar. True, false, or auto.put the dgProp["show vscrollbar"] of group "Data Grid"
show hscrollbarToggles the visibility of the horizontal scrollbar for a table. True, false or auto.put the dgProp["show hscrollbar"] of group "Data Grid"
scrollbar widthSet the width of the scrollbarsput the dgProp["scrollbar width"] of group "Data Grid"
styleGets the style of the data grid, either 'form' or 'table'.put the dgProp["style"] of group "Data Grid"
text colorThe text color to apply to the data area of a table or form.put the dgProp["text color"] of group "Data Grid"
text fontThe font to apply to the data area of a table or form.put the dgProp["text font"] of group "Data Grid"
text sizeThe text size to apply to the data area of a table or form.put the dgProp["text size"] of group "Data Grid"
text styleThe text style to apply to the data area of a table or form.put the dgProp["text style"] of group "Data Grid"
allow column resizingIf true then the user can resize columns in the table header.put the dgProp["allow column resizing"] of group "Data Grid"
column divider colorThe color of the column dividers in a table.put the dgProp["column divider color"] of group "Data Grid"
column alignmentsAllows you to set all column alignment values at once.put the dgProp["column alignments"] of group "Data Grid"
column visibilityAllows you to set the visible property for all columns at once.put the dgProp["column visibility"] of group "Data Grid"
column widthsAllows you to set all column widths at once. Comma delimited list of integers.put the dgProp["column widths"] of group "Data Grid"
columnsLine delimited list of columns in your table.put the dgProp["columns"] of group "Data Grid"
column labelsLine delimited list of labels for columns in your table.put the dgProp["column labels"] of group "Data Grid"
corner colorThe color of the corner piece that appears when both horizontal and vertical scrollbars are visible.put the dgProp["corner color"] of group "Data Grid"
default column behaviorUsed to set the default column behavior.put the dgProp["default column behavior"] of group "Data Grid"
default header behaviorUsed to set the default header behavior.put the dgProp["default header behavior"] of group "Data Grid"
header background colorThe background color of the header.put the dgProp["header background color"] of group "Data Grid"
header background hilite colorThe background color of the header that is being sorted by.put the dgProp["header background hilite color"] of group "Data Grid"
header heightThe height of the header are of the table.put the dgProp["header height"] of group "Data Grid"
header marginsSpecifies the margins to be applied to the fields that display the header text.put the dgProp["header margins"] of group "Data Grid"
header text colorThe text color to apply to the header area of a table.put the dgProp["header text color"] of group "Data Grid"
header text fontThe font to apply to the header area of a table.put the dgProp["header text font"] of group "Data Grid"
header text sizeThe text size to apply to the header area of a table.put the dgProp["header text size"] of group "Data Grid"
header text styleThe text style to apply to the header area of a table.put the dgProp["header text style"] of group "Data Grid"
show column dividersToggles the visibility of the column dividers in the data display area.put the dgProp["show column dividers"] of group "Data Grid"
show headerToggles the visibility of the header. Default value is true.put the dgProp["show header"] of group "Data Grid"
sort by columnThe column that the table data is currently being sorted by.put the dgProp["sort by column"] of group "Data Grid"
visible columnsLine delimited list of columns in your table that are visible.put the dgProp["visible columns"] of group "Data Grid"
dgColumnAlignmentGet/set the alignment for a column.put the dgColumnAlignment["col1"] of group "Data Grid"
dgColumnIsEditableToggle whether or not a column is editable by the user.put the dgColumnIsEditable["col1"] of group "Data Grid"
dgColumnIsVisibleGet/set the visibility of the column.put the dgColumnIsVisible["col1"] of group "Data Grid"
dgColumnIsResizableGet/set whether or not a column is resizable.put the dgColumnIsResizable["col1"] of group "Data Grid"
dgColumnLabelGet/set the label used for the column.put the dgColumnLabel["col1"] of group "Data Grid"
dgColumnMaxWidthGet/Set the maximum width that a column can be resized to.put the dgColumnMaxWidth["col1"] of group "Data Grid"
dgColumnMinWidthGet/Set the minimum width that a column can be resized to.put the dgColumnMinWidth["col1"] of group "Data Grid"
dgColumnNameSet a new name for a column.set the dgColumnName["col1"] of group "Data Grid" to pNewName
dgColumnTemplateGet the control that is used to visually represent the column in the table.put the dgColumnTemplate["col1"] of group "Data Grid"
dgColumnTooltipSet the tooltip that appears when the mouse is over the column header.put the dgColumnTooltip["col1"] of group "Data Grid"
dgHeaderTemplateGet the control that is used to visually represent the header for a column.put the dgHeaderTemplate["col1"] of group "Data Grid"
dgColumnSortDirectionGet/set the direction of the sort for the column.put the dgColumnSortDirection["col1"] of group "Data Grid"
dgColumnSortIsCaseSensitiveGet/set whether or not column sort is case sensitive.put the dgColumnSortIsCaseSensitive["col1"] of group "Data Grid"
dgColumnSortTypeGet/set the sort type of the column.put the dgColumnSortType["col1"] of group "Data Grid"
dgColumnWidthGet/set the width of a column.put the dgColumnWidth["col1"] of group "Data Grid"
dgHeaderAlignmentGet/set the alignment for a column's header.put the dgHeaderAlignment["col1"] of group "Data Grid"
select textSet to true to select all text in the field editor.set the dgTemplateFieldEditor["select text"] of group "Data Grid" to true
textSet to a string that will be assigned to the text property of the field editor.set the dgTemplateFieldEditor["text"] of group "Data Grid" to pText
htmltextSet to a string that will be assigned to the htmltext property of the field editor.set the dgTemplateFieldEditor["htmltext"] of group "Data Grid" to "<p>Hello World</p>"
rtftextSet to a string that will be assigned to the rtftext property of the field editor.put the dgTemplateFieldEditor["rtftext"] of group "Data Grid"
unicodetextSet to a string that will be assigned to the unicodetext property of the field editor.put the dgTemplateFieldEditor["unicodetext"] of group "Data Grid"
utf8textSet to a string that will be assigned to the unicodetext property of the field editor after being converted from UTF-8 to UTF16.put the dgTemplateFieldEditor["utf8text"] of group "Data Grid"
dgHeaderReturns the long id of the group that contains the controls for the table header.put the dgHeader of group "Data Grid"
dgHeaderControlReturns the long id of the group that contains the controls for a column header.put the dgHeaderControl of group "Data Grid"
dgControlReturns the long id of the data grid.get the dgControl of the target
dgDataGet or set the data array that the data grid will display.set the dgData of group "DataGrid" to <pDataArray>
dgDataControlOfIndexReturns the long id of the data control associated with an index.get the dgDataControlOfIndex[pIndex] of group "DataGrid"
dgDataControlOfLineReturns the long id of the data control associated with a line number.get the dgDataControlOfLine[pLine] of group "DataGrid"
dgDataOfIndexGet or set the data associated with a particular index.get the dgDataOfIndex[pIndex] of group "DataGrid" set the dgDataOfIndex[pIndex] of group "DataGrid" to <value>
dgDataOfLineget the dgDataOfLine[pLine] of group "DataGrid" summary: Get or set the data associated with a particular line.
dgFocusSet to true to focus on a data grid.set the dgFocus of group "DataGrid" to true
dgFormattedHeightReturns the formatted height of the data in the data grid.get the dgFormattedHeight of group "DataGrid"
dgFormattedWidthReturns the formatted width of the columns in a data grid.get the dgFormattedWidth of group "DataGrid"
dgNumberOfLinesReturns the number of lines displayed in the data grid.get the dgNumberOfLines of group "DataGrid"
dgNumberOfRecordsFor use with fetching data from a database cursor.set the dgNumberOfRecords of group "DataGrid" to 20
dgTextThe dgText property always reflects the same value as the dgData but in tab delimited form.get the dgText[pIncludeColumnNames] | set the dgText[pIncludeColumnNames] of group "DataGrid" to 20
dgHilitedIndexesReturns a comma delimited list of the indexes that are currently selected. set the dgHilitedIndexes of group "DataGrid" to pIndex
dgHilitedLinesReturns a comma delimited list of the line numbers that are currently selected. set the dgHilitedLines of group "DataGrid" to pLine
dgHScrollGet/set the horizontal scroll of the data grid.set the dgHScroll to of group "DataGrid" to pInteger
dgHScrollPercentGet/set the percentage of the horizontal scroll.set the dgHScrollPercent of group "DataGrid" to pPercent
dgIndexesReturns the internal list of indexes in the order in which they appear in the data grid.get the dgIndexes of group "DataGrid"
dgIndexOfLineReturns the index associated with the given line.put the dgIndexOfLine[pLine] of group "DataGrid"
dgRectOfIndexGet/set the rect of the control associated with the given indexget the dgRectOfIndex[pIndex] of group "DataGrid"
dgRectOfLineGet/set the rect of the control associated with the given lineget the dgRectOfLine[pLine] of group "DataGrid"
dgLineOfIndexReturns the line associated with the given index.put the dgLineOfIndex[pIndex] of group "DataGrid"
dgVScrollGet/set the vertical scroll of the data grid.set the dgVScroll of group "DataGrid" to pInteger
dgVScrollPercentGet/set the percentage of the vertical scroll.set the dgVScrollPercent of group "DataGrid" to pPercent
dgVisibleLinesReturns the first and last line being displayed in the data grid as a comma delimited list.get the dgVisibleLines of group "DataGrid"
dgLineThe line (or row) number that is being displayed in the copy of the template.get the dgLine of this control
dgIndexThe index used to uniquely identify the record being displayed in the copy of the template.get the dgIndex of this control
dgColumnGet the name of the column the instance of the template is Associations with.get the dgColumn of me
dgColumnNumberGet the column number relative to all visible columns.get the dgColumnNumber of me
dgDataControlThis is a custom property defined in the behavior script for your templategetProp dgDataControl
dgHiliteThis is a custom property are defined in the behavior script for your templatesetProp dgHilite {true | false}
dgEditModeTake the data grid into or out of edit mode.set the dgEditMode of group "DataGrid" to {true | false}
animate actionsTurn animations on or off for the data grid.set the dgProp["animate actions"] of group "Data Grid" to {true | false}
enable swipeTurn drag and swipe actions on or off for the data grid.set the dgProp["enable swipe"] of group "Data Grid" to {true | false}
edit mode action controlSet the action control to display when the data grid is in edit mode.set the dgProp["edit mode action control"] of group "Data Grid" to the long id of <control>
edit mode action select controlSet the action select control to display when the data grid is in edit mode.set the dgProp["edit mode action select control"] of group "Data Grid" to the long id of <control>
edit mode reorder controlSet the reorder control to display when the data grid is in edit mode.set the dgProp["edit mode reorder control"] of group "Data Grid" to the long id of <control>
left swipe controlSet the control to display when a data grid row is dragged to the right.set the dgProp["left swipe control"] of group "Data Grid" to the long id of <control>
right swipe controlSet the control to display when a data grid row is dragged to the left.set the dgProp["right swipe control"] of group "Data Grid" to the long id of <control>

Command

NameSummarySyntax
AddDataUse this command to add data to the data grid after you have already populated it by setting the dgData or dgText.dispatch "AddData" to group "DataGrid" with pDataArray,pLine
AddLineAdd tab delimited text to the data grid after you have already populated it by setting the dgData or dgText.dispatch "AddLine" to group "DataGrid" with pText, pColumns, pLine
DeleteIndexDeletes the specified indexes from the data grid.dispatch "DeleteIndex" to group "DataGrid" with pIndex
DeleteIndexesDeletes the specified indexes from the data grid.dispatch "DeleteIndexes" to group "DataGrid" with pIndexes
DeleteLineDeletes the specified lines from the data grid.dispatch "DeleteLine" to group "DataGrid" with pLine
DeleteLinesDeletes the specified lines from the data grid.dispatch "DeleteLine" to group "DataGrid" with pLines
EditCellSends the EditValue message to the column control for column pColumnName of line pLineNo.dispatch "EditCell" to group "DataGrid" with pColumnName, pLineNo
EditCellOfIndexSame as EditCell but uses an index rather than a line number to locate the line to edit.dispatch "EditCellOfIndex" to group "DataGrid" with pColumnName, pIndex
EditFieldTextCreates an editable field for editing the contents of pField.dispatch "EditFieldText" to group "DataGrid" with pField, pIndex, pKey
EditKeySends the EditValue pKey message to the row control for line pLineNo.dispatch "EditKey" to group "DataGrid" with pKey, pLineNo
EditKeyOfIndexSame as EditKey but uses an index rather than a line number to located the line to edit.dispatch "EditKeyOfIndex" to group "DataGrid" with pKey, pIndex
FindIndexSame as EditKey but uses an index rather than a line number to located the line to edit. dispatch "FindIndex" to group "DataGrid" with pKey, pSearchString
RefreshIndexRedraws row associated with pIndexes using latest data.dispatch "RefreshIndex" to group "DataGrid" with pIndexes
RefreshLineRedraws row using latest data.dispatch "RefreshLine" to group "DataGrid" with pLines
ScrollIndexIntoViewScrolls the data grid so that the line associated with pIndex in the internal data array is in view.dispatch "ScrollIndexIntoView" to group "DataGrid" with pIndex
ScrollLineIntoViewScrolls the data grid so that pLine is in view.dispatch "ScrollLineIntoView" to group "DataGrid" with pLine
SelectAllSelects all lines in the data grid.dispatch "SelectAll" to group "DataGrid"
SetDataOfIndexUpdates the key pIndex in the internal data array.dispatch "SetDataOfIndex" to group "DataGrid" with pIndex, pKey, pValue
SetDataOfLineUpdates the internal array of line pLine in the data grid.dispatch "SetDataOfLine" to group "DataGrid" with pLine, pKey, pValue
SortByColumnPass in a column to sort by.dispatch "SortByColumn" to group "DataGrid" with pColumn
SortDataByKeySortDataByKey is the underlying command that all column sorts call.dispatch "SortDataByKey" to group "DataGrid" with pArrayKey, pSortType, pDirection, pCaseSensitive
RefreshListRedraws the data displayed in the data grid.dispatch "RefreshList" to group "DataGrid"
ResetControlResets the control by clearing out any data.dispatch "ResetControl" to group "DataGrid"
ResetListRedraws the data grid data after having copied in fresh copies of any templates.dispatch "ResetList" to group "DataGrid"
ResizeToFitUsed internally when the rect of the data grid changes.dispatch "ResizeToFit" to group "DataGrid"
EditModeShowActionControlForIndexDisplay the action control for the data grid row with the given index.dispatch "EditModeShowActionControlForIndex" to group "DataGrid" with <row index>
EditModeHideActionControlHide any visible data grid action control.dispatch "EditModeHideActionControl" to group "DataGrid" with {true | false}
RowSwipeShowControlForIndexAndSideDisplay the data grid swipe control on the given side of the row with the given index.dispatch "RowSwipeShowControlForIndexAndSide" to group "DataGrid" with <row index>, {"left" | "right"}
RowSwipeHideControlHide any visible data grid swipe control.dispatch "RowSwipeHideControl" to group "DataGrid" with {true | false}

Function

NameSummarySyntax
ColumnControlOfIndexReturns the control for the column of index pIndex in the Data Grid.put ColumnControlOfIndex(pColumnName, pIndex)
GetDataOfIndexRetrieves the internal array for key pIndex of the internal array in the data grid.put GetDataOfIndex(pIndex, pKey)
GetDataOfLineRetrieves the internal array associated with line pLine in the data grid.put GetDataOfLine(pLine, pKey)

Message

NameSummarySyntax
selectionChangedSent whenever the user changes the selection through some sort of user interaction.on selectionChanged pHilitedIndexes, pPreviouslyHilitedIndexes
EditValueThe EditValue message is sent to a table column control when EditCell or EditCellOfIndex is called.on EditValue pKey
FillInDataThe EditValue message is sent to a table column control when EditCell or EditCellOfIndex is called.on FillInData pData
LayoutControlThe EditValue message is sent to a table column control when EditCell or EditCellOfIndex is called.on LayoutControl pControlRect, pWorkingRect
EditModeActionSelectControlClickedSent when a user clicks on a data grid edit mode action select control.on EditModeActionSelectControlClicked pTarget
EditModeActionControlClickedSent when a user clicks on a data grid edit mode action control.on EditModeActionControlClicked pTarget
EditModeActionControlHiddenSent when the datagrid's edit mode action control is hidden.on EditModeActionControlHidden
RowSwipedRightSent when the user swipes a data grid row right.on RowSwipedRight
RowSwipedLeftSent when the user swipes a data grid row left.on RowSwipedLeft
RowLeftSwipeControlClickedSent when the left hand side data grid swipe control is clicked.on RowLeftSwipeControlClicked pTarget
RowRightSwipeControlClickedSent when the right hand side data grid swipe control is clicked.on RowRightSwipeControlClicked pTarget
RowLeftSwipeControlHiddenSent when the left hand side data grid swipe control is hidden.on RowLeftSwipeControlHidden
RowRightSwipeControlHiddenSent when the right hand side data grid swipe control is hidden.on RowRightSwipeControlHidden
GetEditModeActionControlHandle this message to specify a custom data grid action control.on GetEditModeActionControl
GetEditModeActionSelectControlHandle this message to specify a custom data grid action select control.on GetEditModeActionSelectControl
GetEditModeReorderControlHandle this message to specify a custom data grid action select control.on GetEditModeReorderControl
GetLeftSwipeControlHandle this message to specify a custom data grid left hand side swipe control.on GetLeftSwipeControl
GetRightSwipeControlHandle this message to specify a custom data grid right hand side swipe control.on GetRightSwipeControl
EditModeReorderStartedSent when a user starts a dynamic reordering of a data grid.EditModeReorderStarted pIndex, pLineNo
EditModeReorderCompletedSent when a user completes a dynamic reordering of a data grid.EditModeReorderCompleted pIndex, pStartLineNo, pNewLineNo
Thank you for your feedback!

Was this page helpful?